<template>
<div class="box">
    <div class="container">
        <div class="header">
            <div class="div">
                <h2 class="h2">歌曲列表</h2>
                <span class="count">{{list.length}}首歌</span>
            </div>
            <div class="play">
                播放：<span style="color:red">{{playCount}}</span>次
            </div>
        </div>
        <div style="border:1px solid #D9D9D9">
            <ul>
                <li class="l1" >
                    <span style="border-right: 1px solid #E6E6E6; padding: 10px 8px; " class="ss s1"></span>
                    <span style="border-right: 1px solid #E6E6E6; padding: 10px 8px;" class="ss s2">标题</span>
                    <span style="border-right: 1px solid #E6E6E6; padding: 10px 8px;" class="ss s3">时长</span>
                    <span style="padding: 10px 8px;" class="ss s4">歌手</span>
                </li>
                <li @click="play(v.id)" v-for="(v,i) in list" :key="v.id" :class="{l2:true ,gao:i<3}" @mouseenter="enter(i)" @mouseleave="leave(i)">
                    <span class="ss s1">{{i+1}}</span>
                    <span class="ss s2">
                        <img v-if="i < 3" :src='v.al.picUrl'>
                        <i class="el-icon-video-play" style="font-size:17px;vertical-align: middle;"></i>
                        {{v.al.name}}
                    </span>
                    <span class="ss s3">
                        <i ref="ii">{{v.dt | time('mm:ss')}}</i>
                        <i ref="lili" class="font" style="display:none">
                            <i style="padding-right:2px" class="el-icon-plus"></i>
                            <i style="padding-right:2px" class="el-icon-folder-add"></i>
                            <i style="padding-right:2px" class="el-icon-share"></i>
                            <i  class="el-icon-download"></i>
                        </i>
                    </span>
                    <span class="ss s4">{{v.ar[0].name}}</span>
                </li>
            </ul>
        </div>
    </div>

</div>

  </template>

<script>
import { getDetailMusicById } from '@/api/RankingList'
export default {
  data () {
    return {
      list: [],
      playCount: ''
    }
  },
  props: {
    id: {
      type: Number,
      default: 19723756
    }
  },
  created () {
    this.getDetailMusicById()
  },
  methods: {
    enter (i) {
      this.$refs.ii[i].style.display = 'none'
      this.$refs.lili[i].style.display = 'block'
    },
    leave (i) {
      this.$refs.ii[i].style.display = 'block'
      this.$refs.lili[i].style.display = 'none'
    },
    async getDetailMusicById () {
      const res = await getDetailMusicById({ id: this.id })
      this.playCount = res.data.playlist.playCount
      this.list = res.data.playlist.tracks
    },
    play (id) {
      this.$router.push('/song/' + id)
    }
  },
  watch: {
    id: async function (val) {
      const res = await getDetailMusicById({ id: val })
      this.playCount = res.data.playlist.playCount
      this.list = res.data.playlist.tracks
    }
  }
}
</script>

<style scoped>
.box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 670px;
}
.header{
    height: 35px;
    display: flex;
    line-height: 35px;
    justify-content: space-between;
}
.div{
    display: flex;
}
.h2{
    font-size: 20px;
    font-weight: normal;
}
.count{
    padding-left: 20px;
    font-size: 12px;
    color: #666;
}
.play{
    font-size: 12px;
}
.play i{
    font-weight: 700;
}
.l1{
    width: 670px;
    height: 38px;
    border-top: 2px solid red;
    background-color: #F0F0F0;

}
.ss{
    float: left;
    height: 100%;
    font-size: 12px;
    color: #666;

}
.s1{
    width: 77.6px;
}
.s2{
    width: 327.2px;
}
.s3{
    width: 90px;
}
.s4{
    width: 173px;
}
.l2{
    height: 29px;
    line-height: 29px;
}
.l2 .ss{
    padding-left: 12px;
}
.l2 .ss img{
    width: 50px;
    height: 50px;
    margin-right: 10px;
    vertical-align: middle;
}
.gao{
    height: 69px;
    line-height: 69px;
}
.l2:nth-child(2n){
    background-color: #F7F7F7;
}
.font{
    color: #333;
    font-size: 15px;
}

</style>
